<template>
	<view class="content">
		<view class="logo">
			<view class="s1">
				<image :src="vuex_theme.logo"></image>
				<text>{{ vuex_theme.name }}</text>
			</view>
		</view>
		<view class="login">
			<view class="title">
				系统已发起支付服务请求
			</view>
			<view class="buttons-wrap">
				<view class="but">
					<u-button type="primary" text="重新支付" color='#BFCEDF' @click="repay"></u-button>
				</view>
				<view class="but">
					<u-button type="primary" text="完成支付" color='#7677EB' @click="checktransaction"></u-button>
				</view>
			</view>
		</view>
		<view class="return_index_wrap" @click="toIndexPage">
			<text>返回首页</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderid: '',
				order: [],
				extra_info: '',
			}
		},
		onLoad(options) {
			this.orderid = options.orderid
			//得到transaction的基本信息
			this.$API.getTransactionInfo({
				out_trade_no: this.orderid
			}).then(res => {
				if (1 == res.code) {
					this.order = res.data
					this.extra_info = JSON.parse(res.data.extra_info);
				}
			})

		},
		methods: {
			checktransaction() {
				//检查transaction的status字段
				this.$API.getTransactionInfo({
					out_trade_no: this.orderid
				}).then(res => {
					if (1 == res.code) {
						this.order = res.data
						//toast结果， 成功支付， 不同type, 到到不同的页面
						if (2 == this.order.status) {
							this.$u.toast('支付成功, 即将跳转')

							setTimeout(() => {
								if ('activity' == this.extra_info.type) {
									uni.navigateTo({
										url: '/pages/my/address_way?type=money&aid=' + this.orderid
									})
								} else if ('buy_merchant_role' == this.extra_info.type) {
									//设置用户本地is_shop = 1
									// this.$u.vuex('vuex_user.is_shop', 1);
									uni.navigateTo({
										url: '/pages/activity/index'
									});
								} else if ('renew_merchant_role' == this.extra_info.type) {
									uni.navigateTo({
										url: '/pages/merchant/index'
									});
								}

							}, 2000); // 2 秒后跳转
						}

						//支付不成功，“过一会重新检测或者重新发起支付”
						if (1 == this.order.status) {
							this.$u.toast('过一会重新检测或者重新发起支付')
						}
					}
				})

			},
			repay() {
				//根据不同的transaction的extroinfo跳到活动页，或者是身份支付页
				if ('activity' == this.extra_info.type) {
					uni.navigateTo({
						url: '/pages/activity/info?id=' + this.extra_info.id + '&user_id=' + this.extra_info
							.user_id
					});
				} else if ('buy_merchant_role' == this.extra_info.type) {
					uni.navigateTo({
						url: '/pages/activity/login'
					});
				}
			},
			toIndexPage() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		@include flex(column);
		align-items: center;
		justify-content: center;
		width: 670rpx;
		margin: 32rpx auto;

		.logo {
			width: 598rpx;
			height: 80rpx;
			margin: 32rpx auto 0 auto;
			@include flex;
			justify-content: center;
			align-items: center;

			.s1 {
				@include flex;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				text {
					height: 80rpx;
					font-size: 40rpx;
					font-weight: 600;
					color: #3D3D3D;
					line-height: 80rpx;
					margin-left: 24rpx;
				}
			}
		}

		.login {
			width: 566rpx;
			background-color: #fff;
			border-radius: 48rpx;
			padding: 60rpx 30rpx;
			margin-top: 60rpx;

			.title {
				// height: 36rpx;
				font-size: 40rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 600;
				color: #110202;
				line-height: 36rpx;
			}

			.buttons-wrap {
				display: flex;
				flex-direction: row;
				margin-top: 50rpx;
				justify-content: space-between;

				.but {
					width: 250rpx;
					height: 88rpx;
					// margin: 60rpx auto;

					/deep/ .u-button {
						height: 88rpx;
						border-radius: 28rpx;
					}
				}
			}
		}

		.return_index_wrap {
			margin-top: 100rpx;
			/* 返回首页 */


			font-size: 16px;
			font-weight: 300;
			line-height: 18px;
			letter-spacing: 0px;

			color: #8A8A8A;

		}
	}
</style>